<template>
  <div>
    <a-card>添加图书</a-card>
    <CommonForm
      ref="commonForm"
      :formItem="formItem.form_item"
      :formHandler="formItem.form_handler"
      :formData="formItem.formState"
    />
    <!-- <a-card :bordered="false">
      <a-form ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="书名" name="title">
          <a-input v-model:value="title" placeholder="请填写书名" />
        </a-form-item>
        <a-form-item label="作者" name="author">
          <a-input v-model:value="author" placeholder="请填写作者" />
        </a-form-item>
        <a-form-item label="封面" name="image">
          <a-input v-model:value="image" placeholder="请填写封面" />
        </a-form-item>
        <a-form-item label="简介" name="summary">
          <a-textarea v-model:value="summary" placeholder="请填写书名" :rows="5" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">保存</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card> -->
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted, watch } from "vue";
import { message } from "ant-design-vue";
import CommonForm from "@/components/form/index.vue";
//api
import { addBook } from "@/api/api.js";
export default {
  components: { CommonForm },
  setup() {
    const commonForm = ref(null);
    // const formState = reactive({
    //   title: "",
    //   author: "",
    //   image: "",
    //   summary: "",
    // });
    const formItem = reactive({
      form_item: [
        {
          type: "input",
          label: "书名",
          name: "title",
          placeholder: "请填写书名",
          required: true,
        },
        {
          type: "input",
          label: "作者",
          name: "author",
          placeholder: "请填写作者",
          required: true,
        },
        {
          type: "input",
          label: "封面",
          name: "image",
          placeholder: "请填写封面",
          required: true,
        },
        {
          type: "textarea",
          label: "简介",
          name: "summary",
          rows: "5",
          placeholder: "请填写该书简介",
          required: true,
        },
      ],
      form_handler: [
        {
          label: "确定",
          key: "submit",
          type: "primary",
          handler: () => onSubmit(),
        },
        { label: "重置", key: "reset", handler: () => resetForm() },
      ],
      formState: {
        title: "",
        author: "",
        image: "",
        summary: "",
      },
    });
    const onSubmit = async () => {
      let res = await addBook(formItem.formState);
      message.success(res.data.message);
      resetForm();
    };
    const resetForm = () => {
      for (let key in formItem.formState) {
        formItem.formState[key] = "";
      }
    };

    return {
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 14,
      },
      resetForm,
      onSubmit,
      formItem,
      commonForm,
    };
  },
};
</script>

<style lang="less" scoped></style>
